<script setup lang="ts">
import { onMounted, onBeforeUnmount } from 'vue';
import { state } from '../../approve/edit/state';
import ApproveProcessList from '../../approve/edit/components/approve-process-list/approve-process-list.vue';
import ApproveEditForm from '../../approve/edit/components/approve-edit-form/approve-edit-form.vue';
import {
  queryDetail,
  submitByCustomSingle,
  conditionAttributeChanged,
  saveDraft,
} from '../../approve/edit/utils/approve-edit';
import { showLoading, reLaunch, getCurrentInstance, eventCenter } from '@tarojs/taro';
import { QUERY_FLOW_PATH_TEMPLATE_LIST } from '/@/api/modules/flow-path/flow-path-template';
import { LOGIN_APP } from '/@/api/modules/base/app-sys-user';
import { appEvents } from '/@/utils/events';
/**
 * @description 当前路由信息
 */
const params = getCurrentInstance().router?.params as unknown as {
  title?: string;
  templateCodeList?: string;
  /**
   * 审批id
   */
  id?: string;
};
/**
 * 查询模版详情
 * @param organIdList 组织ID集合
 */
function queryTemplateDetail(organIdList?: string[]) {
  showLoading();
  QUERY_FLOW_PATH_TEMPLATE_LIST({
    comQuery: { page: 1, pageSize: 1 },
    flowpathTemplateDto: { organIdList },
    templateCodeList: params.templateCodeList?.split(','),
  }).then((res) => {
    if (!res.flowpathTemplateDto || !res.flowpathTemplateDto.length) return;
    const id = res.flowpathTemplateDto[0].id || '';
    queryDetail(id, params.id);
  });
}

onMounted(() => {
  eventCenter.on(getCurrentInstance().router?.onShow as string, () => {
    LOGIN_APP().then((res) => {
      const organIdList = res.organDtos.map((item) => item?.id || '0');
      queryTemplateDetail(organIdList);
    });
  });
  appEvents.on('conditionAttributeChanged', () => {
    console.log('appEvents.on conditionAttributeChanged');
    conditionAttributeChanged();
  });
});

onBeforeUnmount(() => {
  appEvents.off('conditionAttributeChanged');
});
</script>
<template>
  <view class="custom-approve-single-edit app-page--1">
    <app-navbar :title="params.title ? decodeURI(params.title) : '申请事项'" />
    <nut-tabs
      class="custom-approve-single-edit__tabs"
      model-value="edit"
      @click="
        ({ paneKey }) => {
          if (paneKey === 'record') {
            reLaunch({
              url: `/pages/approve/record/index?from=custom_single&title=${params.title}&templateCodeList=${params.templateCodeList}`,
            });
          }
        }
      "
    >
      <nut-tab-pane title="发起申请" pane-key="edit" />
      <nut-tab-pane title="申请记录" pane-key="record" />
    </nut-tabs>
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="custom-approve-single-edit__wrapper">
        <approve-edit-form
          v-if="state.attributes && state.attributes.length > 0"
          :attributes="state.attributes"
        />
        <nut-cell-group
          v-if="state.conditionAttr && state.conditionAttr === 1 && !state.flowGraphAddFlow"
        >
          <nut-cell>
            <template #title>
              <view class="approve-edit__title"> 流程 </view>
              <view class="approve-edit__content"> 必填信息填写后，流程信息自动显示 </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <approve-process-list
          v-else-if="state.flowGraphAddFlow && Object.keys(state.flowGraphAddFlow).length > 0"
          :flow-graph-add-flow="state.flowGraphAddFlow"
        />
      </view>
    </scroll-view>
    <view class="custom-approve-single-edit__footer">
      <nut-button class="custom-approve-single-edit__footer-btn" color="#bbb" @click="saveDraft()">
        存草稿
      </nut-button>
      <nut-button
        class="custom-approve-single-edit__footer-btn"
        block
        type="info"
        @click="submitByCustomSingle(params.title, params.id ? 'record' : 'edit')"
      >
        提交
      </nut-button>
    </view>
  </view>
</template>
<style lang="scss">
.custom-approve-single-edit {
  &__wrapper {
    padding: 20px 20px;
  }
  &__tabs {
    .nut-tabs {
      &__content {
        display: none;
      }
    }
  }

  &__footer {
    padding: 20px 20px;
    background-color: #fff;
    display: flex;
  }
  &__footer-btn {
    flex: 1;
    margin: 0 10px;
  }
}
</style>
